<template>
  <div style="text-align: left">
      <h1 style="text-align: left">
        <img src="../../assets/img/daifu.png" style="width: 25px;height: 25px" flex>
        代付商户列表
      </h1>
    <hr style="margin-top: 10px">

    <div style="margin-top: 10px;display: flex">
      <el-button type="primary" @click="getBusinessList">查询代付商户</el-button>

      <el-button style="margin-left: 5%" type="warning" @click="add_business">添加代付商户</el-button>

    </div>

    <el-dialog
      title="添加代付商户"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="商户名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="商户号">
          <el-input v-model="form.account"></el-input>
        </el-form-item>
        <el-form-item label="密钥">
          <el-input v-model="form.secretKey"></el-input>
        </el-form-item>
        <el-form-item label="最小金额">
          <el-input v-model="form.beginMoney"></el-input>
        </el-form-item>
        <el-form-item label="最大金额">
          <el-input v-model="form.endMoney"></el-input>
        </el-form-item>
        <el-form-item label="代付手续费(%)">
          <el-input v-model="form.fee"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark"></el-input>
        </el-form-item>
        <el-form-item label="备用字段1">
          <el-input v-model="form.backup1"></el-input>
        </el-form-item>
        <el-form-item label="备用字段2">
          <el-input v-model="form.backup2"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save_business">确 定</el-button>
  </span>
    </el-dialog>

    <!--表格组件-->

    <div style="margin-top: 1.5%">
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column type="index" width="60" label="#" fixed>
        </el-table-column>
        <el-table-column
          prop="name"
          label="商户名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="account"
          label="商户号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="secretKey"
          label="密钥"
          width="420">
        </el-table-column>
        <el-table-column
          prop="beginMoney"
          label="最小金额"
          width="120">
        </el-table-column>
        <el-table-column
          prop="endMoney"
          label="最大金额"
          width="300">
        </el-table-column>
        <el-table-column
          prop="fee"
          label="代付手续费(5%)"
          width="120">
        </el-table-column>

        <el-table-column
          prop="remark"
          label="备注"
          width="120">
        </el-table-column>
        <el-table-column
          prop="status"
          label="停用/启用"
          width="120">

          <template slot-scope="scope">
              <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" on-color="#13ce66"
                         @change="isStatus(scope.row.status,scope.row.id)" off-color="#ff4949" on-text="启用"
                         off-text="停用">
              </el-switch>
          </template>

        </el-table-column>
        <el-table-column
          prop="backup1"
          label="备用字段1"
          width="120">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="delete_business(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNumber"
        :page-sizes="[5, 8, 10, 13, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  export default{
    data() {
      return  {
        dialogVisible:false,
        form: {
          id:undefined,
          name: '',
          account: '',
          secretKey: '',
          beginMoney: 0,
          endMoney: 0,
          fee:  0,
          remark: '',
          backup1: '',
          backup2: '',
        },
        tableData:[],
        pageSize: 10,
        total: 1,
        pageNumber: 1,
      }
    },
    created(){
      this.getBusinessList();
    },

    methods:{
      delete_business(id){
        this.$api.deleteDfBusiness(id).then(res =>{
          if (res.code==="000000"){
            this.$message.success("删除成功！")
            this.getBusinessList()
          }
        })
      },
      save_business(){
        this.$api.saveDfBusiness(this.form).then(res =>{
          if (res.code==="000000"){
            this.$message.success("操作成功！")
            this.dialogVisible = false
            this.getBusinessList()
          }
        })
      },
      handleClick(row){
        this.form = row
        this.dialogVisible = true
      },
      isStatus(mes,id){
        let params = {
          id:id,
          status:mes
        }
        this.$api.saveDfBusiness(params).then(function (res) {
          if (res.code==="000000") {
            this.$message.success("更改状态成功！")
          }
        })
      },

      getBusinessList(){
        let params = {
          pageSize:this.pageSize,
          pageNumber:this.pageNumber
        }
        this.$api.getDfBusinessList(params).then(res =>{
          if (res.code==="000000"){
            this.tableData = res.data.list
            this.$message.success("获取代付商户列表成功！")

          }
        })
      },
      add_business(){
        this.form.id=undefined
        this.form.name =""
        this.form.account=""
        this.form.secretKey=""
        this.form.remark = ""
        this.form.backup1 = ""
        this.form.backup2 = ""
        this.form.beginMoney = 0
        this.form.endMoney=0
        this.form.fee=0
        this.dialogVisible = true
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val
        this.getUserList()
      },
      handleCurrentChange(val) {
        this.pageNumber = val;
        this.getUserList()
      }
    }
  }
</script>

<style>

</style>
